<template>
  <!--地貌设定新增弹层 -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    class="dialogStyleSmall"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      label-width="auto"
    >
      <el-radio-group :value="formData.regionTypeId">
        <el-radio v-for="(type,index) in typeList" :key="index" style="margin-top:10px" readonly :label="type.id">{{ type.typeName }}</el-radio>
      </el-radio-group>
    </el-form>
  </el-dialog>
</template>

<script>
import { getRegionalTypeListNo, detailRegionalType } from '@/api/superviseBaseInfo/regionalSettings'
export default {
  components: {
  },
  data() {
    return {
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      formData: {
        regionTypeId: '' // 地貌类型
      },
      typeList: []
      /* 表单 end*/
    }
  },
  methods: {
    /* 详情弹层 start*/
    // 弹窗初始化
    handleAdd(title, value) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.getList()
      this.getDetailById(value)
    },
    // 获取地貌列表
    async getList() {
      const { data: { rows }} = await getRegionalTypeListNo()
      this.typeList = rows.map(item => ({
        typeName: item.typeName,
        id: item.id
      }))
    },
    // 获取详情
    async getDetailById(value) {
      const { data } = await detailRegionalType(value)
      if (data) {
        this.formData = { regionTypeId: data.id }
      }
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.formData.regionTypeId = ''
    },
    // 提交按钮
    submitForm() {
      this.cancel()
    }
    /* 详情弹层 end*/
  }

}
</script>

<style scoped>
.tree-city {
  margin-top: 8px;
}
</style>
